<template>
  <div class="main">
    <topNav :toLastPath='true'>发布消息</topNav>
    <form action="" class="form">
      <div class="all_form">
        <!-- 文本域 -->
        <div class="form_one">
          <textarea class="textarea" placeholder="请输入发布的信息" v-model="info"></textarea>


          <!-- 添加图片 -->
          <!-- <div class="all_image_select">
            <ul class="image_ul">
              <li class="one_image one_image_select" v-for="(item, index) in positionImgs" :key="index">
                <img class="del" src="http://file.rzkeji.com/web/recruit/icon/closeButton@3x.png" @click.stop="delImg(index)"/>
                <img class="img_msg" :src="item">
              </li>
            </ul>
            <input @change="fileChange($event)" type="file" id="upload_file" multiple accept="image/png,image/jpeg,image/gif" capture="camera" style="display: none"/>
            <img src="http://file.rzkeji.com/web/recruit/icon/camera.png" class="one_image" @click="chooseFile"/>
          </div> -->
        </div>

        <!-- 灰色线 -->
        <div class="gray_line"></div>

        <!-- 地址 -->
        <div class="div_nor">
          <img class="icon_address" src="http://file.rzkeji.com/web/recruit/icon/address.png"/>
          <div class="msg_address" @click="addressShow">
            <input type="text" class="write_msg" placeholder="请选择地址"  v-model="address"  readonly/>
          </div>
          <popup-picker ref="area" :col="areaList" columns_type='area' @getSelectValue="getAreaValue"></popup-picker>
        </div>

        <!-- 地址详情 -->
        <div class="div_nor">
          <img class="icon_address" src="http://file.rzkeji.com/web/recruit/icon/addressDetails.png">
          <div class="msg_address">
            <input type="text" class="write_msg" placeholder="输入地址详情"  v-model="addressDetails"/>
          </div>
        </div>

        <!-- 电话 -->
        <div class="div_nor">
          <img class="icon_img" src="http://file.rzkeji.com/web/recruit/icon/phone.png" />
          <input type="text" class="write_msg" placeholder="请填写号码" v-model="contactPhone"/>
        </div>

        <!--选择工作周期-->
        <div class="div_nor">
          <img class="icon_img" src="http://file.rzkeji.com/web/recruit/icon/trade.png" />
          <!-- <div class="msg_address">
            <select class="write_msg write_msg_select" name="positionType" ref="positionType">
              <option value ="short">短期工</option>
              <option value ="long">长期工</option>
            </select>
          </div> -->
          <!-- <div>选择工作周期</div> -->
          <input type="text" readonly placeholder="选择工作周期" class="write_msg" @click="showIndustry" v-model="industry"> 
          <van-popup  position="bottom" :overlay="true" v-model="showArea">
              <van-picker
               :columns="industryArr"
                :show-toolbar='true'
                @cancel="industryCancel"
                @confirm="industryConfirm"/>
        </van-popup>
        </div>


        <!-- 行业和职位-->
        <!--<div class="div_nor">-->
          <!--<img class="icon_img" src="../../../static/trade.png" />-->
          <!--<div class="msg_address"  >-->
            <!--<input class="write_msg" @click="showTrade" type="text" placeholder="选择行业与职位" v-model="tradeName"  readonly>-->
            <!--<div class="arrow"></div>-->
          <!--</div>-->
          <!--<popup-picker ref="trade" :col="tradeList" columns_type='mulColumns' @getSelectValue="getSelectValue"></popup-picker>-->
        <!--</div>-->


        <!-- 发布按钮 -->
        <div class="btn_div">
          <input type="button" class="btn_release btn_del" value="立即删除" @click="deleteResume" v-if="resume_id"/>
          <input type="button" class="btn_release" value="立即发布" @click="releaseTo"/>
        </div>


      </div>

    </form>
    <!--地图容器-->
    <div id="mapNone"></div>
  </div>
</template>

<script>
  import {mixin1, showToast} from '../../utils/index.js'
  // import areaList from '@/assets/area';
  import topNav from '@/components/topNav';
  import popupPicker from '@/components/popupPicker';
  import { Toast } from 'vant';
  import {MP} from '@/assets/map';
  import { Picker } from 'vant';
import { setTimeout } from 'timers';

export default {
  mixins:[mixin1],
  data () {
    return {
      info:"", // 发布消息
      positionImgs:[], // 图片集合
      address:"", //  地址
      addressDetails: "", // 地址详情
      contactPhone:"", // 电话号码
      releaseId:"",   //  发布的id
      addressComponents: {  },  // 地址信息
      tradeName: "",

      tradeId: "",
      jobTypeId: "",

      tradeList:{},
      tradeList__native:"",
      industryArr:['长期工','短期工'],
      showArea:false,
      industry:'',//选中的行业
      address_detail: null, //详细地址
      userlocation:{lng:"",lat:""},
      areaList:{},
      region:[],
      resume_id:''

    }
  },
  computed: {},
  watch: {//监听vuex的变化，进行worklist的更新
    
  },
  components:{
    popupPicker,
    topNav

  },

  methods:
  {
//    把数据设置在tradeList和tradeList__native上
    setForTradeListData(tradeList__native)
    {
      let columns={ };
      tradeList__native.forEach((value)=>
      {
        let job=[];
        value.job.forEach((value)=>
        {
          job.push(value.name);
        });
        columns[value.name]=job
      });

      return columns;
    },


  // 获取tradeList
    async getTradeList()
    {
      let res = await this.$axios('/position/getIndustryList',"");
      let tradeList__native = res.data.data;

//      设置格式化tradeList数据
      this.tradeList = this.setForTradeListData(tradeList__native);;
      this.tradeList__native = tradeList__native;
  },

//  滑动选择器，按确定时间
  getSelectValue(e)
  {
    this.tradeName = "行业："+e[0] + ",职位：" + e[1];
    this.tradeList__native.forEach((itemA)=>
    {
        if( itemA.name ==  e[0])
        {
          this.tradeId = itemA.id;
          itemA.job.forEach((itemB)=>
          {
            if(itemB.name == e[1])
                this.jobTypeId = itemB.id;
          });
        }
    });

  },

//    定义html的字体大小
    getFontBig()
    {
      var fontBig = document.body.offsetWidth/10 + "px";
      document.querySelector("html").style.fontSize = fontBig;
    },

  //   设置位置信息对象 和 标记( r是地址信息，map是地图对象 )
  //    centerAndZoom(): 显示地图
  //    Marker(): 创建标记对象
  //    addOverlay(): 添加覆盖物，如标记图像
  //    panTo(): map移动，标记也移动
  setAddressAndMarker(r, map)
  {
    map.centerAndZoom(r.point, 11);
    var mk = new BMap.Marker(r.point);
    map.addOverlay(mk);
    map.panTo(r.point);
  },

//  根据坐标逆解析获取地址描述 (r是地址信息，myGeo是你解析对象)
  getRealAddress(r, myGeo)
  {
    var that = this;
    myGeo.getLocation(r.point, function (result)
    {
      if (result) {
        that.address = result.address;
        that.region[0]=result.addressComponents.province
        that.region[1]=result.addressComponents.city
        that.region[2]=result.addressComponents.district
        console.log(that.region)
      }
    });
  },


//    地图的方法
    selectAddress()
    {
      var that = this;
//      同步获取地图
      this.$nextTick(function () {
        MP("ozT7g2K7TQBlwdTOCKukAqTWOrXG9TCd").then(function (BMap)
        {
//  创建Map地图实例，Map(传递id)
          var map = new BMap.Map("mapNone");

//   获取自己位置信息对象
          var geolocation = new BMap.Geolocation();

          //    getCurrentPosition(): 获取位置对象信息
          geolocation.getCurrentPosition(function (r)
          {
            if (this.getStatus() == BMAP_STATUS_SUCCESS)
            {
//        移动and待标记指定地方
              that.setAddressAndMarker(r, map);
// 创建地理编码实例
              var myGeo = new BMap.Geocoder();
// 根据坐标得到地址描述
              that.getRealAddress(r, myGeo);
            }
            else {
              alert('failed' + this.getStatus());
            }
          }, {enableHighAccuracy: true})
        })
      })
    },

//    点击type为file的事件
    chooseFile() {
      document.getElementById('upload_file').click();
    },

//    获取选中的图片路径
    fileChange(el)
    {
      if (!el.target.files[0].size) return;
//      这里是<input type="file" />
      this.fileList(el.target);
      el.target.value = ''

    },

//    文件标签里的文件路径解析
    fileList(fileList) {
      let files = fileList.files;
      for (let i = 0; i < files.length; i++)
          this.fileAdd(files[i]);
    },

//    添加文件的方法
   async fileAdd(file) {

//      文件的流，可以获取绝对定位的文件
      let reader = new FileReader();
      let image = new Image();
      let _this = this;

//      读取图片,转化base64
      reader.readAsDataURL(file);
//       加载完毕回调方法，其中result是base64图片数据
      reader.onload = function ()
      {
        let imgBase = this.result;

//      上传图片，成功后进行显示图片
        _this.$axios.post("/file/UploadBase64",{ base_code: this.result}).then(function (res)
        {
          if(res.data.message == "上传成功！");
            _this.positionImgs.push(imgBase);
        });
      }
    },

//    删除图片
    delImg(index) {
      this.positionImgs.splice(index, 1);
    },
//行业选择
    showIndustry(){
      this.showArea=true;
    },
    industryConfirm(e){
      this.industry=e
      this.showArea=false
    },
    industryCancel(){
      this.industry=''
      this.showArea=false
    },
    addressShow(){
      this.$refs.area.$data.showArea=true;
    },
    getAreaValue(e){
      // this.address=e
      let arr=[]
      e.forEach(value=>{
        arr.push(value.name)
      })
      this.region=arr
      this.address=arr[0]+arr[1]+arr[2]
    },
    

//    数据上传方法
  async releaseTo()
    {
      if(this.industry=='长期工'){
        var industry='long'
      }else if(this.industry=='短期工'){
        var industry='short'
      }
      let res =await this.$axios.post("/resume/buildResume",
        {
          desc: this.info,
          province: this.region[0],
          city: this.region[1],
          area: this.region[2],
          address_detail:this.addressDetails,
          phone: this.contactPhone,
          position_type: industry,
          id:this.resume_id
        });
      console.log(res)
      if(res.data.level == "error")
        this.$currency.showToast(res.data.message,1500,'fail');
      else
      {
        this.$currency.showToast('发布成功',1500,'success');
        setTimeout( ()=>{
          this.$router.push({name:'me'})
        }, 1500);
      }
    },


//  显示滑动选择器
    showTrade(){
      this.$refs.trade.$data.showArea=true;
    },
    async deleteResume(){
     const choosen= await this.$currency.showModal('确认删除简历');
     if(choosen){
       const res=await this.$axios.post('/resume/deleteResume',{resume_id:this.resume_id})
        if(res.data.level=='success'){
          this.$currency.showToast(res.data.message)
          setTimeout(()=>{
            this.$router.push({name:'me'})
          },2000)
        }
     }
        
    },
    async getMyResume(){
      const res= await this.$axios('/resume/getUserResume')
      if(res.data.level=='success'){
        const resume=res.data.data;
        this.info=resume.desc
        this.province=resume.province
        this.city=resume.city
        this.area=resume.area
        this.address=this.province+this.city+this.area
        this.addressDetails=resume.address_detail
        this.region=[this.province,this.city,this.area]
        this.contactPhone=resume.phone
        this.industry=resume.position_type
        this.resume_id=resume.id

          
      }else{
       this.selectAddress();
      }
    }

  },

  mounted(){
    this.getFontBig();

    this.getTradeList();
    this.getAddress()
    
  },
  activated() {
    this.getMyResume()
  },
}
</script>

<style scoped>

  .form
  {
    width: 100%;
    height: calc(100% - 45px);
    padding-top: 45px;
  }

   html,body
  {
    width: 100%;
    height: 100%;
  }

  #mapNone {
    display: none;
  }

  .main{
    width: 100%;
    height: 100%;

  }
  .header_select
  {
    width: 100%;
    height: 20px;
    display: flex;
    font-size: 14px;
  }

  .header_select>div
  {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .all_form
  {
    width: 100%;
    height: 100%;
  }

  .form_one
  {
    width: 100%;
    height: calc(100% - 300px);
    box-sizing: border-box;
    padding: 15px;
    padding-bottom: 0;
    box-sizing: border-box;
  }

  .textarea
  {
    width: 100%;
    height: 100px;
    border: none;
    font-size: 16px;
  }

  .all_image_select
  {
    width: 100%;
    padding-top: 15px;
  }

  .image_ul
  {
    width: 100%;
  }

  .image_ul>li
  {
    float: left;
    position: relative;
  }

  /* .one_image
  {
    width: 2.12rem;
    height: 2.12rem;
    padding: 0.1rem;
  }

  .img_msg
  {
    width: 100%;
    height: 100%;
  }

  .del
  {
    width: .5rem;
    height: .5rem;
    position: absolute;
    top:0;
    right: 0;
  } */

  .gray_line
  {
    width: 100%;
    height: 15px;
    background: rgb(247,250,248);
  }

  .div_nor
  {
    width: 100%;
    height: 56px;
    font-size: 14px;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;
  }

  .div_nor::after
  {
    content: "";
    width: calc(100% - 0.8rem);
    height: 2px;
    background: rgb(242,242,242);
    position: absolute;
    left: 0.4rem;
    bottom: 0;
  }

  .icon_address
  {
    width: 18px;
    height: 18px;
  }

  .icon_img
  {
    width:18px;
    height: 18px;
    margin-right:2px;
  }

  .msg_address
  {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgb(117,117,117);
  }


  .write_msg
  {
    width: 100%;
    margin-left: 7.5px;
    border: none;
  }

  .write_msg_select
  {
    height: 100%;
    appearance:none;
    border: none;
  }

  /* 箭头 */
  .arrow
  {
    width: 7px;
    height: 7px;
    border: none;
    border-top: 2px solid rgb(206, 206, 206);
    border-right: 2px solid rgb(206, 206, 206);
    transform: rotate(45deg);
  }

  .btn_div
  {
    width: 100%;
    height: 2.5rem;
    background: rgb(247,250,248);
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .btn_div_bottom
  {
    width: 100%;
    height: 45px;
    display: flex;
    background: rgb(247,250,248);
  }

  .btn_release
  {
    width: 135px;
    height: 45px;
    background: rgb(52,198,88);
    border-radius: 10px;
    border: none;
    font-size: 14px;
    color: white;
  }
  .btn_del{
    background: orange;
  }
</style>

